import React, { useEffect, useState } from 'react';
import { Modal } from 'antd';
import { connect } from 'react-redux';
import { Button, Checkbox, Form, Input } from 'antd';

export const EditModel = ({
  editModel,
  closeedit,
  dispatch,
  editIndex,
  editItem,
  props,
}: any) => {
    const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({ kefu_name: editItem.kefu_name });
  }, [editItem]);

  const handleOk = () => {};

  const handleCancel = () => {
    closeedit(false);
  };
  const onFinish = (values: any) => {
    console.log('Success:', values);
    console.log({editIndex})//1
    dispatch({ type: 'kefu/EDIT', payload: { ...values, editIndex } });
    closeedit(false);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
   
  };

  return (
    <div>
      <Modal
        title="修改客服"
        open={editModel}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="客服名"
            name="kefu_name"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ margin: '0 10px' }}
            >
              保存
            </Button>
            <Button type="primary" htmlType="submit">
              取消
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

const mapStateToProps = (state: any) => ({});

export default connect(mapStateToProps)(EditModel);
